<template>
  <div class="ann-view-wrapper">
    <div class="ann-view-header-wrapper">
      <div class="ann-view-header-search-wrapper">
        <div class="ann-view-header-search-datepicker-wrapper">
          <span class="ann-view-header-search-datepicker-span">查看范围 : </span>
          <el-date-picker
                  class="ann-view-header-search-datepicker"
                  v-model="dataScope"
                  type="daterange"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-button class="ann-view-header-search-button"
                   icon="el-icon-search"
                   size="medium"
                   @click="getAnnouncementsByDate"
                   type="primary">搜索</el-button>
      </div>
    </div>
    <div class="ann-view-table-wrapper">
      <el-table
              class="ann-view-table"
              v-loading="loading"
              element-loading-text="拼命加载中"
              :data="announcement">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="ann-view-table-expand">
              <el-form-item label="公告标题">
                <span>{{ props.row.title }}</span>
              </el-form-item>
              <el-form-item label="发布时间">
                <span>{{ props.row.releaseTime }}</span>
              </el-form-item>
              <el-form-item label="发布人">
                <span>{{ props.row.publisherName }}</span>
              </el-form-item>
              <el-form-item label="公告内容">
                <span>{{ props.row.content }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
                prop="title"
                label="标题"
                width="450">
          <template slot-scope="scope">
            <span style="margin-left: 10px">《 {{ scope.row.title }} 》</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="releaseTime"
                label="发布时间">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.releaseTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="ann-view-table-pagination-wrapper">
        <el-pagination
                background
                @current-change="currentChange"
                @size-change="sizeChange"
                layout="sizes, prev, pager, next, jumper, ->, total, slot"
                :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AnnView",
    data() {
      return {
        announcement: [],
        currentPage: 1,
        size: 10,
        dataScope: '',
        total: null,
        loading: false,
      }
    },
    mounted() {
      this.getAnnouncements()
    },
    methods: {
      getAnnouncementsByDate() {
        this.loading = true
        this.getRequest('/annmanagement/annview/?currentPage=' + this.currentPage
            + '&size=' + this.size
            + '&dateScope=' + this.dataScope).then(resp => {
          if (resp) {
            this.announcement = resp.data
            this.total = resp.total
            this.loading = false
          }
        })
      },
      getAnnouncements() {
        this.loading = true
        this.getRequest('/annmanagement/annview/?currentPage=' + this.currentPage
            + '&size=' + this.size).then(resp => {
          if (resp) {
            this.announcement = resp.data
            this.total = resp.total
            this.loading = false
          }
        })
      },
      //  当分页组件的每页显示多少条数据改变时
      sizeChange(size) {
        this.size = size
        this.currentPage = 1
        this.getAnnouncements()
      },
      //  当分页组件的页数改变时
      currentChange(currentPage) {
        this.currentPage = currentPage
        this.getAnnouncements()
      }
    }
  }
</script>

<style lang="less">

  .ann-view-wrapper {
    width: 90%;
    margin-top: 20px;
    margin-left: 40px;

    .ann-view-header-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      box-sizing: border-box;
      padding: 20px 20px;
      /*background-color: #EBEEF5;*/
      height: 80px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
      border-radius: 4px;

      .ann-view-header-search-wrapper {
        display: flex;

        .ann-view-header-search-datepicker-wrapper {
          margin-right: 10px;

          .ann-view-header-search-datepicker-span {
            font-size: small;
          }

          .ann-view-header-search-datepicker {
            width: 300px;
          }
        }

        .ann-view-header-search-button {
          height: min-content;
        }

      }

      .ann-view-header-operation-wrapper {

        .ann-view-header-add-button {

        }

        .ann-view-header-delete-batch-button {

        }
      }
    }

    .ann-view-table-wrapper {
      margin-top: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .20), 0 0 6px rgba(0, 0, 0, .08);
      border-radius: 4px;
      padding: 5px 20px 20px 20px;

      .ann-view-table {

        .ann-view-table-expand {
          font-size: 0;
          background-color: #EDF2FC;
          padding: 20px;
        }

        .ann-view-table-expand label {
          width: 90px;
          color: #99a9bf;
        }
        .ann-view-table-expand .el-form-item {
          margin-right: 0;
          margin-bottom: 0;
          width: 50%;
        }
      }

      .ann-view-table-pagination-wrapper {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
</style>